<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借出</title>
    <script type="text/javascript" src="/static/lib/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/lib/layui/css/layui.css" />
</head>
<div style="padding: 20px">
    <form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item" >
        <label for="" class="layui-form-label">器具名称</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" value="{$tool.name}" disabled>
        </div>
        <div class="layui-form-mid layui-word-aux">已有{$tishi}人申请此器具</div>
    </div>
    <div class="layui-form-item" >
        <label for="" class="layui-form-label">所属课室</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" value="{$tool->lab->name}" disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">开始时间</label>
        <div class="layui-input-inline">
            <input id="test1" type="text" class="layui-input" placeholder="请选择开始日期"><br>
            <input id="test2" type="text" class="layui-input" placeholder="请选择开始时间">
        </div>
    </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择时长</label>
            <div class="layui-input-inline">
                <select name="" id="time" lay-verify="required">
                    <option value=""></option>
                    {for start="1" end="$tool.num+1"}
                    <option value="{$i}">{$i}</option>
                    {/for}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn">提交</button>
            </div>
        </div>
    </form>
</div>

</body>
<script>
    $(".layui-btn").click(function () {
        event.preventDefault();
        var ii=layer.load();
        $.post(
           '',
           {
               starttime:$("#test1").val()+' '+$("#test2").val(),
               time:$("#time").val()
           },
           function (data) {
               if (data.statu==200){
                   layer.close(ii);
                   layer.msg(data.msg,function () {
                       // 获得frame索引
                       var index = parent.layer.getFrameIndex(window.name);
                       //关闭当前frame
                       parent.layer.close(index);
                   });
               } else {
                   layer.close(ii);
                   layer.msg(data.msg)
               }
           }
       )
    });
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            ,type: 'date'
            ,min: 0 //7天前
            ,max: 1 //7天后

        });
        laydate.render({
            elem: '#test2' //指定元素
            ,type: 'time'
            ,min: '08:20:00' //7天前
            ,max: '17:50:00' //7天后

        });
    });
</script>
</html>